<template>
    <div class="complaints-wrapper">
        <div v-if="isLoding" class="loading">
            <van-loading type="spinner" color="#fff" />
        </div>
        <div class="header-hint">请选择投诉该账号的原因：</div>
        <div class="complains-list">
            <template v-for="(item, index) in complaintData" :key="index">
                <div class="item" @click="handleClick(item)">
                    <span style="font-size: 18px;">{{ item.name }}</span>
                    <van-icon name="arrow" />
                </div>
            </template>
        </div>
        <!-- <div class="prevent-fraud">如何防止网络诈骗</div> -->
        <div class="notice" @click="goNotice">
            投诉须知
        </div>
    </div>
</template>

<script setup>
import { getComplaintTree } from '@/api/mock/index'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';

const isLoding = ref(true)
const route = useRoute();
const router = useRouter();
const complaintData = ref([])

function addLevelToData(data, level = 1) {
    // 遍历当前层级的每个对象
    data.forEach(item => {
        // 添加 level 属性
        item.level = level;

        // 如果有子列表，递归处理子层级（level + 1）
        if (item.subReasonList && item.subReasonList.length > 0) {
            addLevelToData(item.subReasonList, level + 1);
        }
    });
}

const queryComplaintTree = async () => {
    getComplaintTree({ corpId: route?.query?.appid || route?.query?.appId || localStorage.getItem("appid") }).then(res => {
        const data = res.data.data;
        addLevelToData(data, 1);
        complaintData.value = data;
        sessionStorage.setItem('treeData', JSON.stringify(data));
    }).finally(() => {
        isLoding.value = false;
    })
}

const goNotice = () => {
    router.push({
        path: '/notice',
    });
}

/**
 * 通过 id 查找树节点
 * @param {Array} tree 树数据
 * @param {number} id 目标节点id
 * @returns {Object|null} 找到的节点或null
 */
const findNodeById = (tree, id) => {
    for (const node of tree) {
        if (node.id === id) return node;
        if (node.subReasonList?.length) {
            const found = findNodeById(node.subReasonList, id);
            if (found) return found;
        }
    }
    return null;
}

const handleClick = (item) => {
    if (item.subReasonList.length === 0) {
        router.push({
            path: '/info',
            query: {
                id: item.id,
                name: item.name
            }
        })
    } else {
        router.push({
            path: '/test',
            query: {
                id: item.id,
            }
        })
    }
}

onMounted(() => {
    localStorage.setItem("appid", route?.query?.appid || route?.query?.appId || localStorage.getItem("appid"))
    queryComplaintTree()
})
</script>

<style lang="less" scoped>
.complaints-wrapper {
    position: relative;
    height: 100vh;

    .loading {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: rgba(0, 0, 0, .7);
        width: 122px;
        height: 122px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
    }
}

.header-hint {
    padding: 10px 16px;
    font-size: 16px;
    background: #ededed;
    color: #939393;
}

.complains-list {
    padding: 0px 6px;
    background: #fff;
}

.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
    height: 54px;
}

.prevent-fraud {
    padding: 6px 16px;
    font-size: 12px;
    color: #6999ed;
}

.notice {
    margin-top: 25px;
    text-align: center;
    font-size: 14px;
    color: #6999ed;
}
</style>
